import React from 'react'
import { Progress, Icon } from 'antd'
export default class DockerTable extends React.Component {
  constructor () {
    super()
    this.checkScroll = this.checkScroll.bind(this)
  }

  componentDidMount () {
    this.checkScroll()
  }

  componentDidUpdate () {
    this.checkScroll()
  }

  checkScroll () {
    const mineTable = this.refs.mineTable
    const mineHeader = this.refs.mineHeader
    const scrollH = mineTable.scrollHeight
    const clientH = mineTable.clientHeight
    console.info('scrollH', mineTable.scrollHeight)
    console.info('clientH', mineTable.clientHeight)
    if (scrollH > clientH) {
      mineHeader.style.width = 'calc(100% - 15px)'
    } else {
      mineHeader.style.width = '100%'
    }
  }
  render () {
    return (
      <div style={{ height: '100%' }}>
        <table>
          <thead ref='mineHeader'>
            <tr>
              <th>主机</th>
              <th>状态</th>
              <th>报告</th>
            </tr>
          </thead>
          <tbody ref='mineTable'>
            <tr>
              <td>k2data-1</td>
              <td>
                <Progress percent={100} showInfo={false} strokeWidth={25} />
              </td>
              <td>
                <a>详细报告</a>
              </td>
            </tr>
            <tr>
              <td>k2data-2</td>
              <td>
                <Progress percent={100} showInfo={false} strokeWidth={25} />
              </td>
              <td>
                <a>详细报告</a>
              </td>
            </tr>
            <tr>
              <td>k2data-3</td>
              <td>
                <Progress percent={100} showInfo={false} strokeWidth={25} />
              </td>
              <td>
                <a>详细报告</a>
              </td>
            </tr>
            <tr>
              <td>k2data-4</td>
              <td>
                <Progress percent={30} showInfo={false} strokeWidth={25} status='exception' />
              </td>
              <td>
                <a>详细报告</a>
                <Icon type='sync' />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }
}
